<template>
	<view class="content login-page bg-white">
		<view class="padding bg-white">
			<view class="cu-steps">
				<view class="cu-item" :class="index>basics?'':'text-orange'" v-for="(item,index) in basicsList" :key="index">
					<text :class="'cuIcon-' + item.cuIcon"></text> <span class='step-text'>{{item.name}}</span>
				</view>
			</view>
		</view>
		<view class="input-group" v-if='basics == 0'>
			<m-input type="number" clearable v-model="params.mobile" placeholder="输入你的已认证手机号" :maxLength="11" :focus="true"></m-input>
			<m-input type="number" clearable v-model="params.code" placeholder="手机验证码" :maxLength="6">
				<button size="mini" class="text-orange text-style" style="font-size:30rpx"  :disabled="btnDis" @tap="sendCode">{{btnText}}</button>
			</m-input>
			<button type="primary" class="primary round" @tap="checkInfo" :loading="submitBtnDis">下一步</button>
		</view>
		<view class="input-group" v-if='basics == 1'>
			<m-input type="number" clearable v-model="params.bindMobile" placeholder="认证手机号" :maxLength="11" :focus="true"></m-input>
			<m-input type="number" clearable v-model="params.bindCode" placeholder="手机验证码" :maxLength="6">
				<button size="mini" class="text-orange text-style" style="font-size:30rpx"   :disabled="btnDis" @tap="sendCode">{{btnText}}</button>
			</m-input>
			<button type="primary" class="primary round" @tap="reset" :loading="submitBtnDis">提交</button>
		</view>
		<view class="input-group" v-if='basics == 2'>
			<view class="orderContent bg-white" v-if="basicsList[2].name == '成功'">
				<view class="info">
					<image class="orderSuc" src="/static/img/orderSuc.png" mode="widthFix"></image><br>
					<text class="text-xxl">认证手机成功</text><br>
				</view>
			</view>
			<view class="orderContent bg-white" v-else>
				<view class="info">
					<image class="orderSuc" src="/static/img/error.png" mode="widthFix"></image><br>
					<text class="text-xxl">认证手机失败</text><br>
					<text class="text-df">{{errMsg}}</text><br>
					<text class="text-orange text-df" @tap="tryAgain">重新来过</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations,
		mapGetters,
		mapActions
	} from 'vuex'
	import mInput from '@/components/m-input/m-input.vue'
	import graceChecker from '@/common/graceChecker.js'
	import formRuleConfig from '@/config/formRule.config.js'

	export default {
		components: {
			mInput
		},
		data() {
			return {
				basicsList: [{
					cuIcon: 'radioboxfill',
					name: '解绑认证手机'
				}, {
					cuIcon: 'radioboxfill',
					name: '修改认证手机'
				}, {
					cuIcon: 'roundcheckfill',
					name: '成功'
				}],
				basics: 0,
				btnDis: false,
				submitBtnDis: false,
				btnText: "发送验证码",
				params: {
					mobile: "",
					code: "",
					bindMobile: '',
					bindCode: ""
				},
				reqBody: {},
				checked: false,
				errMsg: '重置密码失败',
				t: null
			}
		},
		onLoad(query) {
			this.initredirectRouteData(query);
		},
		computed: {
			...mapState(["openId", "userInfo"]),
			...mapGetters(['hasLogin'])
		},
		methods: {
			goPage(routeName) {
				let page = getCurrentPages()
				let redirecte = true
				if (page.length > 1) {
					console.log(page)
					if (page[page.length - 1].route.indexOf(routeName) !== -1) {
						redirecte = true
					} else {
						redirecte = false
					}
				} else {
					redirecte = false
				}
				if (redirecte) {
					this.$mRouter.redirectTo({
						route: this.$mRoutesConfig[routeName],
					})
				} else {
					this.$mRouter.push({
						route: this.$mRoutesConfig[routeName],
					})
				}
			},
			tryAgain() {
				this.params = {
					mobile: "",
					code: "",
					bindMobile: '',
					bindCode: ""
				}
				this.basicsList[2] = {
					cuIcon: 'roundcheckfill',
					name: '成功'
				}
				this.btnText = "发送验证码"
				clearInterval(this.t);
				this.BasicsSteps()
			},
			BasicsSteps() {
				this.basics = this.basics == this.basicsList.length - 1 ? 0 : this.basics + 1
			},
			// 发送验证码
			async sendCode(isUnbinding) {
				if (isUnbinding) {
					this.reqBody["mobile"] = this.params["mobile"];
					let checkRes = graceChecker.check(this.reqBody, [{
						name: "mobile",
						checkType: "mobile",
						checkRule: "",
						errorMsg: "手机号格式不正确"
					}]);
					if (!checkRes) {
						uni.showToast({
							title: graceChecker.error,
							icon: "none"
						});
						return;
					}
					await this.$apis.sendYsUnbindCode({
						mobile: this.params.mobile
					});
				} else {
					this.reqBody["mobile"] = this.params["bindMobile"];
					let checkRes = graceChecker.check(this.reqBody, [{
						name: "mobile",
						checkType: "mobile",
						checkRule: "",
						errorMsg: "手机号格式不正确"
					}]);
					if (!checkRes) {
						uni.showToast({
							title: graceChecker.error,
							icon: "none"
						});
						return;
					}
					await this.$apis.sendYsCode({
						newmobile: this.params.bindMobile
					});
				}
				uni.showToast({
					title: '发送成功,请查收'
				});
				// 开启倒计时
				this.countDown();
			},


			// 验证码倒计时
			countDown() {
				this.t = null;
				let timer = 60;
				this.btnDis = true;
				clearInterval(this.t);
				this.btnText = `${timer}s`;
				this.t = setInterval(() => {
					if (timer == 0) {
						clearInterval(this.t);
						this.btnText = "重新发送";
						this.btnDis = false;
						return;
					}
					timer--;
					this.btnText = `${timer}s`;
				}, 1000)
			},
			initredirectRouteData(query) {
				if (query.redirectUrl) {
					this.redirectRoute.path = query.redirectUrl;
					delete query.redirectUrl;
					this.routeQuery = query;
				}
			},
			// 解绑信息
			async checkInfo() {
				try {
					this.reqBody["mobile"] = this.params["mobile"];
					this.reqBody["code"] = this.params["code"];

					let checkRes = graceChecker.check(this.reqBody, formRuleConfig.unbingdingStepRule);
					if (!checkRes) {
						uni.showToast({
							title: graceChecker.error,
							icon: "none"
						});
						return;
					}
					// 校验通过...
					this.submitBtnDis = true
					await this.$apis.unbindMobile(this.reqBody);
					this.submitBtnDis = false
					clearInterval(this.t);
					this.t = null;
					this.btnDis = false;
					this.btnText = "发送验证码";
					this.BasicsSteps();
					let userInfo = JSON.parse(JSON.stringify(this.userInfo))
					userInfo.safeMobile = 2
					this.$store.commit("SET_USERINFO", userInfo || {});
				} catch (e) {
					this.submitBtnDis = false;
				}
			},
			async reset() {
				try {
					let info = {}
					info["mobile"] = this.params["bindMobile"];
					info["code"] = this.params["bindCode"];
					let checkRes = graceChecker.check(info, formRuleConfig.unbingdingStepRule);
					if (!checkRes) {
						uni.showToast({
							title: graceChecker.error,
							icon: "none"
						});
						return;
					}
					// 校验通过...
					this.submitBtnDis = true
					await this.$apis.bindMobile({
						newmobile: this.params["bindMobile"],
						code: this.params["bindCode"]
					});
					this.submitBtnDis = false
					this.BasicsSteps();
					let userInfo = JSON.parse(JSON.stringify(this.userInfo))
					userInfo.safeMobile = 1
					this.$store.commit("SET_USERINFO", userInfo);
				} catch (e) {
					this.errMsg = e
					this.BasicsSteps()
					this.basicsList[2].cuIcon = 'roundclosefill',
					this.basicsList[2].name = '失败',
					this.submitBtnDis = false;
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.bg-white {
		background-color: #FFFFFF;
	}

	.step-text {
		font-size: 22rpx;
		font-family: PingFang SC;
		font-weight: 500;
	}

	.cu-steps .cu-item [class*="cuIcon-"],
	.cu-steps .cu-item .num {
		line-height: 50rpx;
	}

	.cu-steps .cu-item:before,
	.cu-steps .cu-item:after,
	.cu-steps.steps-arrow .cu-item:before,
	.cu-steps.steps-arrow .cu-item:after {
		top: 25rpx;
	}

	.text-style {
		background: #FFFFFF;
	}

	button:after {
		border: none;
	}

	.input-group {
		width: 78.6%;
		margin: 0 auto;
		padding: 60rpx 0 115rpx;
		background-color: #fff;
		// border-radius: 10upx;
		border-radius: 10rpx;
		text-align: center;
		position: relative;

		image {
			width: 174rpx;
			margin: 50rpx auto;
			display: inline-block;
		}

		.primary {
			position: absolute;
			bottom: -50rpx;
			background-color: #FF6A00;
			width: 100%;
		}
	}

	.forget {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		line-height: 80rpx;
		color: rgba(198, 198, 199, 1);
		text-align: right;
	}

	.text-df {
		line-height: 80rpx;
	}
</style>
